SharePoint Framework Web Part Development Basics by Nick Day

Author:Nick Day
Language: eng
Format: epub
Publisher: Bookboon.com Ltd.
Published: 2022-05-26T00:00:00+00:00

4.6 Add custom properties to the property pane and define how the web part appears in the toolbox

The property pane is where we can configure the controls that will allow us to set the properties for our web part. We will keep the input control for the description and add a dropdown control to choose between the MS Graph or SharePoint Online API when retrieving the images.

In our project, the property pane code is in the ImageGalleryWepart.ts file. The imageGallery folder is where all our web part code resides. When we scaffolded the project, we chose the No JavaScript framework to make this easier to follow; however, if you had chosen React, the folder structure would have been slightly different.

To avoid having to save our changes every time, let us set Visual Studio Code to auto save. Click on File in the top navigation and then select Auto Save.

In this step, we are going to modify the title of the web part as well as the location of the web part in the web part Toolbox. To achieve this, we need to browse and open the following file ImageGalleryWebpart.manifest.json. The Toolbox groups are defined by GUIDs, and we are going to make our web part available in Text, media, and content group in the web part Toolbox. We will use the following GUID: cf066440-0614-43d6-98ae-0b31cf14c7c3. We also need to change our web part title to Custom Image Gallery because there is an out of the box image gallery web part. This will help the users differentiate between both web parts. The updated file should look like the following:

Download

Copyright Disclaimer:
This site does not store any files on its server. We only index and link to content provided by other sites. Please contact the content providers to delete copyright contents if any and email us, we'll remove relevant links or contents immediately.